<template>
	<div>
		<div class="cont_one">
			<div class="cont_one_view">
				<div class="cont_one_header">选择平台</div>
				<div class="cont_one_line"></div>
				<div class="cont_one_xuan">
					<div v-for="(item, index) in chooseMenuList">
						<span class="kuan_first">{{item.platformTitle}}</span>
						<span v-for="(itemSub , indexSub) in item.platformInfo">
							<div  v-if="chooseStatusValue === itemSub.platformType" @click="switchTopMenuList(item.platformCate,itemSub.platformType)"  class="kuan pitchon wx" :idtype="item.platformCate" :value="itemSub.platformType">{{itemSub.platformName}}</div>
							<div v-else  class="kuan" :idtype="item.platformCate" @click="switchTopMenuList(item.platformCate,itemSub.platformType)" :value="itemSub.platformType">{{itemSub.platformName}}</div>
						</span>
					</div>
				</div>
				<div class="cont_one_xinxi">填写账号信息<span id="goto_help_page" style="cursor: pointer;"></span></div>
				<div class="cont_one_line"></div>
				<div class="cont_one_inputs" v-if="chooseStatusValue === '1'">
					<div class="wxname">
						<span>微信名称：</span>
						<input type="text" maxlength="50">
						<!--onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" >-->

					</div>
					<div class="wxmark">
						<span>微信号：</span>
						<input type="text" maxlength="255" />
					</div>
					<div class="articleUrl">
						<span>文章链接：</span>
						<input type="text" placeholder="请输入任意已发布文章链接，用于系统验证公众号有效性" />
					</div>
				</div>
				<div v-else class="cont_one_inputs" >
					<div class="accountname">
						<span>账号名称：</span>
						<input type="text" />
					</div>
					<div class="homepageUrl">
						<span>主页地址：</span>
						<input type="text" />
					</div>
				</div>
				<div class="cont_one_btns">
					<div>
						<span class="cont_one_cancel" @click="cancelToStep">取消</span>
						<span class="cont_one_next_step down_one" @click="nextStepToTwo">下一步</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chooseStatusValue:'1',   //当前选中状态
				choosePlatformType:'1',   //当前选中的平台
				chooseMenuList:[
					{
						platformCate:"1",
						platformTitle:'文章发布平台:',
						platformInfo:[
							{
								platformName:'微信公众号',
								platformType:'1',
							},
							{
								platformName:'今日头条',
								platformType:'2',
							}
						],
						
					},
					{
						platformCate:"2",
						platformTitle:'音频发布平台:',
						platformInfo:[
							{
								platformName:'喜马拉雅',
								platformType:'3',
							},
						],
						
					},
					{
						platformCate:"3",
						platformTitle:'视频课程发布平台:',
						platformInfo:[
							{
								platformName:'网易云课堂',
								platformType:'4',
							},
							{
								platformName:'百度传课',
								platformType:'5',
							},
							{
								platformName:'腾讯课堂',
								platformType:'6',
							}
						],
						
					}
				]

			};
			
		},
		methods: {
			// 第一步到第二步
			nextStepToTwo(){
				//切换顶部的状态
				let statusValue = 'two';
				this.$emit("changestepstatus", statusValue);
			},
			// 取消第一步
			cancelToStep(){
				this.$router.push({  //核心语句
					path:'/copyRight/automaticAccess',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
						activeStatus:0 ,  
					}
				})
			},
			// 切换菜单
			switchTopMenuList(platformCate,platformType){
				this.chooseStatusValue =platformType;   //当前选中状态
				this.choosePlatformType=platformCate;   //当前选中平台
			}
		},
		
		beforeMount: function() {
			// console.log("47")
		},
		mounted: function() {
			// console.log("7777777777")
		},
	}
</script>

<style>
	@import 'automaticAdd.css';
	.cont_one .cont_one_view {
		width: 620px;
		margin: 0 auto;
	}
</style>
